<template>
  <div style="font-size: 1.5rem;color: grey; text-align: left; margin: 7px 0">政务工作人员</div>
  <el-table :data="administrativeStaff" stripe>
    <el-table-column prop="departId" label="一级部门"/>
    <el-table-column prop="secondId" label="二级部门"/>
    <el-table-column prop="nickName" label="用户名"/>
    <el-table-column prop="job" label="职位"/>
    <el-table-column prop="name" label="姓名"/>
    <el-table-column prop="idCardNum" label="身份证号码"/>
    <el-table-column prop="mobileNum" label="手机号码"/>
    <el-table-column prop="emailNum" label="邮箱地址"/>
    <el-table-column prop="qqNum" label="QQ号码"/>
    <el-table-column prop="familyAddr" label="家庭住址"/>
    <el-table-column prop="insuranceCardNum" label="社保卡号"/>
    <el-table-column prop="roleId.value" label="用户角色" width="200px"/>
    <el-table-column label="操作" width="200px">
      <template #default="scope">
        <el-button type="primary"  @click="handleEditAdmin(scope.row)">修改</el-button>
        <el-button type="danger" @click="deletePeople(scope.row.userId)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="administrativeStaffDialog" :title="DialogTitle" width="500">
    <el-form :model="administrativeStaffForm" label-width="150px">
      <el-form-item label="用户名">
        <el-input v-model="administrativeStaffForm.nickName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="职位">
        <el-input v-model="administrativeStaffForm.job" autocomplete="off" />
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="administrativeStaffForm.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="身份证号码">
        <el-input v-model="administrativeStaffForm.idCardNum" autocomplete="off" />
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input v-model="administrativeStaffForm.mobileNum" autocomplete="off" />
      </el-form-item>
      <el-form-item label="邮箱地址">
        <el-input v-model="administrativeStaffForm.emailNum" autocomplete="off" />
      </el-form-item>
      <el-form-item label="QQ号码">
        <el-input v-model="administrativeStaffForm.qqNum" autocomplete="off" />
      </el-form-item>
      <el-form-item label="家庭住址">
        <el-input v-model="administrativeStaffForm.familyAddr" autocomplete="off" />
      </el-form-item>
      <el-form-item label="社保卡号">
        <el-input v-model="administrativeStaffForm.insuranceCardNum" autocomplete="off" />
      </el-form-item>
      <el-form-item label="企业名称" v-if="administrativeStaffForm.userKind===2">
        <el-input v-model="administrativeStaffForm.companyName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="企业社会信用号码" v-if="administrativeStaffForm.userKind===2">
        <el-input v-model="administrativeStaffForm.creditNum" autocomplete="off" />
      </el-form-item>
<!--        companyName?: string,
  creditNum?: string,-->
      <el-form-item label="所属部门" v-if="administrativeStaffForm.userKind===0">
        <el-cascader
            v-model="value"
            :options="administrativeStaffOptions"
            :props="props"
        />
      </el-form-item>
      <el-form-item label="用户角色">
        <el-select
            v-model="administrativeStaffForm.roleId"
            placeholder="Select"
        >
          <el-option
              v-for="item in role"
              :key="item.num"
              :label="item.value"
              :value="item.num"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveOrUpdate">确认</el-button>
        <el-button @click="administrativeStaffDialog = false">取消</el-button>
      </el-form-item>
    </el-form>
<!--    <template #footer>-->
<!--      <div class="dialog-footer">-->
<!--        <el-button @click="dialogFormVisible = false">Cancel</el-button>-->
<!--        <el-button type="primary" @click="dialogFormVisible = false">-->
<!--          Confirm-->
<!--        </el-button>-->
<!--      </div>-->
<!--    </template>-->
  </el-dialog>
  <hr style="margin: 20px 0; width: 100%">


  <div style="font-size: 1.5rem;color: grey; text-align: left; margin: 7px 0">自然人</div>
  <el-table :data="naturalPerson" stripe>
    <el-table-column prop="nickName" label="用户名"/>
    <el-table-column prop="idCardNum" label="身份证号码"/>
    <el-table-column prop="mobileNum" label="手机号码"/>
    <el-table-column prop="emailNum" label="邮箱地址"/>
    <el-table-column prop="qqNum" label="QQ号码"/>
    <el-table-column prop="familyAddr" label="家庭住址"/>
    <el-table-column prop="insuranceCardNum" label="社保卡号"/>
    <el-table-column prop="roleId.value" label="用户角色"/>
    <el-table-column label="操作" width="200px">
      <template #default="scope">
        <el-button type="primary"  @click="handleEditAdmin(scope.row)">修改</el-button>
        <el-button type="danger" @click="deletePeople(scope.row.userId)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
<!--  <el-button style="margin-top: 10px" type="primary" @click="feedback(naturalPerson)">一键提交</el-button>-->


  <hr style="margin: 20px 0;">

  <div style="font-size: 1.5rem;color: grey; text-align: left; margin: 7px 0">企业用户</div>
  <el-table :data="businessUsers" stripe >
    <el-table-column prop="nickName" label="用户名"/>
    <el-table-column prop="idCardNum" label="身份证号码"/>
    <el-table-column prop="mobileNum" label="手机号码"/>
    <el-table-column prop="emailNum" label="邮箱地址"/>
    <el-table-column prop="qqNum" label="QQ号码"/>
    <el-table-column prop="familyAddr" label="家庭住址"/>
    <el-table-column prop="insuranceCardNum" label="社保卡号"/>
    <el-table-column prop="companyName" label="企业名称"/>
    <el-table-column prop="creditNum" label="企业社会信用号码"/>
    <el-table-column prop="roleId.value" label="用户角色"/>
    <el-table-column label="操作" width="200px">
      <template #default="scope">
        <el-button type="primary"  @click="handleEditAdmin(scope.row)">修改</el-button>
        <el-button type="danger" @click="deletePeople(scope.row.userId)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
<!--  <el-button style="margin-top: 10px" type="primary" @click="feedback(businessUsers)">一键提交</el-button>-->
</template>

<script setup lang="ts">

import axios from "axios";
import {computed, onMounted, ref} from "vue";
import {transformJson} from "@/utils/transformedJson";
import {ElMessage} from "element-plus";

interface register {
  userId: number,
  nickName: string,
  userKind: number,
  roleId?: number,
  companyName?: string,
  creditNum?: string,
  departId?: number,
  secondId?: number,
  idCardNum?: string,
  mobileNum?: string,
  emailNum?: string,
  qqNum?: string,
  familyAddr?: string,
  insuranceCardNum?: string,
  job?: string,
  name?: string
}
const value = ref([])
//政务工作人员
const administrativeStaffDialog = ref(false);
let administrativeStaffForm = ref({});
const administrativeStaffOptions = ref([])
const DialogTitle = ref('修改')
//自然人
//企业用户
const reviewData = ref<register[]>();
const role = [
  {
    value :'数据产品消费者',
    num :1
  },
  {
    value :'源数据提供者',
    num :2
  },
  {
    value :'数据产品加工者',
    num :3
  },
  {
    value :'监管者',
    num :4
  },
  {
    value :'系统管理员',
    num :5
  }
]
const load = () => {
  axios.get('http://127.0.0.1:8089/api/info/user_management')
      .then(resp => {
        if (resp.status == 200) {
          for (const respElement of resp.data) {
            respElement.roleId = role[respElement.roleId]
          }
          reviewData.value = resp.data;
        }
      })
}
onMounted(() => {
  load();
})
const saveOrUpdate = () => {
  administrativeStaffForm.value.departId = value.value[0]
  administrativeStaffForm.value.secondId = value.value[1]
  axios.post('http://localhost:8089/api/admin/update',administrativeStaffForm.value).then(res => {
    if (res.status===200) {
      ElMessage.success("修改成功")
      administrativeStaffDialog.value = false
      load()
    } else {
      ElMessage.error("修改失败")
    }
  }).catch(err =>{
    ElMessage.error("修改失败")
  })
}
const props = {
  expandTrigger: 'hover' as const,
}
const dynamicComputed = (i: number) => {
  const ans: register[] = []
  reviewData.value?.map((d) => {
    if (d.userKind === i)
      ans.push(d);
  })
  return ans;
}

const administrativeStaff = computed(() => {
  return dynamicComputed(0)
})
const handleEditAdmin = (row:any) => {//1，政务工作人员，2，自然人，3，企业用户
  administrativeStaffDialog.value = true
  administrativeStaffForm =  ref(row)
  if (administrativeStaffForm.value.userKind === 0){
    DialogTitle.value = '修改政务工作人员'
    axios.get('http://localhost:8080/departmentinfo/sub').then(
        res=>{
          if (res.status === 200){
            administrativeStaffOptions.value = transformJson(res.data)
          }
        }
    ).catch(err=>{
      console.log(err)
    })
  }else if (administrativeStaffForm.value.userKind===1){
    DialogTitle.value = '修改自然人'
  }else {
    DialogTitle.value = '修改企业人员'
  }
}
const deletePeople = (id:number) => {
  axios.delete('http://localhost:8089/api/admin/delete/' + id).then(res => {
    console.log(res)
    if (res) {
      ElMessage.success("删除成功")
      load()
    } else {
      ElMessage.error("删除失败")
    }
  }).catch(err =>{
    ElMessage.error("删除失败")
  })
}
const naturalPerson = computed(() => {
  return dynamicComputed(1)
})

const businessUsers = computed(() => {
  return dynamicComputed(2);
})

</script>

<style scoped>

</style>